<template>
    <div>
        <el-dialog 
            title="Tab设置" 
            :visible="true" 
            append-to-body 
            :close-on-click-modal="false"
            @closed="handleCloseTabDialog"
            @close="handleCloseTabDialog"
        >
            <div class="setting-btn-list">
              <div class="btn-item" v-for="(item, index) in totalTabList" :key="index">
                <span class="btn-name">{{ item.tab_name }}</span>
                <el-switch 
                  v-model="item.is_open" 
                  :active-value="1"
                  :inactive-value="0"
                  @change="handleChangeTabConfig(item)"
                />
              </div>
            </div>
            <div class="dialog-flex-footer">
                <div class="placeholder"></div>
                <div slot="footer" class="dialog-footer">
                    <!-- <el-button @click="handleCloseTabDialog">取 消</el-button> -->
                    <el-button type="primary" @click="handleConfirmTabSetting">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { 
  getAllTabs, switchTabConfig
} from '@/api/group/searchTask';

export default {
    name: 'createTaskDialog',
    data() {
        return {
            totalTabList: []
        }
    },
    mounted() {
        this.handleGetTabsList();
    },
    methods: {
        
        //****标签页设置弹窗--start */
        handleChangeTabConfig(item) {
            switchTabConfig({
                tab_id: item.tab_id
            }).then(res => {
                if(res.code === 0) {
                    this.$message.success('设置成功');
                }
            })
        },
        handleCloseTabDialog() {
            this.$emit('onChangeTabDialogVisible', false)
        },
        handleGetTabsList() {
            getAllTabs().then(res => {
                if(res.code === 0) {
                    this.totalTabList = res?.data;
                }
            })
        },
        handleConfirmTabSetting() {
            this.$emit('onChangeTabDialogVisible', false)
        },
        //****标签页设置弹窗--end */
    },

}
</script>
